<template>
  <div class="container">

    <div class="header">
      <img :src="require('@/assets/left_arrow.png')"
           alt="图片不见啦"
           width=15%
           height=15%
           id="img1"
           @click="clearInput" />
      <!--在变化的时候自动搜索-->
      <el-input v-model="inputsearch"
                placeholder="搜索..."
                @change="dosearch"
                @keydown.enter="dosearch"></el-input>

      <img :src="require('@/assets/nav_list.png')"
           alt="图片不见啦"
           width=15%
           height=15%
           id="img2" />
    </div>
    <!--新建文档-->
    <div id="untitled"
         @click="createnew">
      <img :src="require('@/assets/doc.png')"
           alt="图片不见啦"
           width=10%
           height=10%
           id="img3" /><span>无标题课程</span>
    </div>
    <div>
      <img :src="require('@/assets/folder.png')"
           alt="图片不见啦"
           width=10%
           height=10%
           id="img4" /><span>用户自定义文件夹</span>
    </div>
    <div id="pop"
         ref="menu"
         v-show="visible">
      <div>置顶</div>
      <div>加星</div>
      <div @mouseenter.prevent="showchild"
           @mouseleave.prevent="closechild">导出<i class="el-icon-caret-right">
        </i>
        <div id="child"
             ref="child"
             v-show="childvisible">
          <div>到处成word</div>
          <div>导出成pdf</div>
        </div>
      </div>
      <div @click.prevent="renameItem">重命名</div>
      <div>移动到</div>
      <div>复制</div>
      <div>粘贴</div>
      <div @click.prevent="deleteItem">删除</div>
      <div>分享</div>
    </div>
    <img id="maskimg"
         ref="imgshow"
         v-show="showF" />
    <div id="divlist">
      <ul @scroll="closeMenu">
        <!--滚动时候让contextmenu消失-->
        <li v-for="obj in objfrombackend"
            :key="obj.id"
            @click="detail(obj.id)"
            v-loading.fullscreen.lock="fullscreenLoading"
            @contextmenu.prevent="showmenu($event,obj.id,obj.name)"
            @mouseenter.prevent="showimg(obj.id)"
            @mouseleave.prevent="closeimg(obj.id)">
          <!--右击展示具体的内容，左击展示菜单栏，鼠标进入展示预览图片，鼠标离开展示图片消失-->
          <img :src="require('@/assets/doc.png')"
               alt="图片不见啦"
               width=10%
               height=30%
               id="img5" />

          <div id="divtext"
               href="#">
            <h4>{{obj.name}}</h4>
            <p class="info">班级名称:{{obj.cname}}
              开课模式:{{obj.mode|radioFormater}}
              课程归属单位:{{obj.unit|unitFormater}}
              开放限制{{obj.limit.split('-')|checkFormater}}
              课程归属分类{{obj.category|categoryFormater}}
              课程标签{{obj.tags.split('-')}}
              开始时间:{{obj.begindate}}
              结束时间:{{obj.finaldate}}
              课时:{{obj.hour}}
            </p>

          </div>

        </li>

      </ul>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      inputsearch: '', //存搜索框的内容
      fullscreenLoading: false, //页面全屏锁定加载的需要
      visible: false, //菜单栏的显示与否
      currentId: 0, //当前时间处理的li
      currentName: '', //当前事件处理的li对应的Name
      showF: false, //预览图片的显示与否
      childvisible: false, //子菜单栏的显示与否
    }
  },
  computed: {
    ...mapState(['objfrombackend']), //后端数据获取
  },
  beforeMount() {
    this.$store.dispatch('getallobj') //挂在前获取所有的数据
  },
  watch: {
    visible(newValue, oldValue) {
      if (newValue) {
        document.body.addEventListener('click', this.closeMenu) //如果有新的值就增加点击移除效果
      } else {
        document.body.removeEventListener('click', this.closeMenu) //如果没有新的值就移除点击移除效果
      }
    },
  },

  methods: {
    closechild() {
      this.childvisible = false //设置子菜单不可见的方法
    },
    showchild() {
      //设置子菜单可见并设置位置
      console.log(this.$refs.menu.style.left)
      this.$refs.child.style.left = this.$refs.menu.style.left + 100
      this.$refs.child.style.top = this.$refs.menu.style.top + 100
      console.log(this.$refs.child.style.left)
      this.childvisible = true
    },
    ...mapActions(['partialupdateobj', 'deleteobj']), //store方法映射
    creatediv() {
      //重命名弹出框
      this.$prompt('请输入课程名', '提示', {
        confirmButtonText: '确认修改',
        cancelButtonText: '取消',
        inputPattern: /^\S+$/,
        inputErrorMessage: '输入不合法',
        inputPlaceholder: this.currentName,
      })
        .then(({ value }) => {
          this.$message({
            type: 'success',
            message: '修改完成,当前值为' + value,
          })
          this.partialupdateobj([{ name: value }, this.currentIndex]) //部分修改

          this.fullscreenLoading = true //页面过度
          setTimeout(() => {
            this.fullscreenLoading = false
            this.$router.go(0)
          }, 2000)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入',
          })
          this.$router.push({ path: '/page2' })
        })
    },
    confirmpop() {
      //删除时候的警告
      this.$confirm('此操作将永久删除该数据, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteobj(this.currentIndex)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          this.fullscreenLoading = true
          setTimeout(() => {
            this.fullscreenLoading = false
            this.$router.go(0)
          }, 2000)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    showimg(id) {
      //图片的展示 读取浏览器本地缓存的base64图片
      var base64 = window.localStorage.getItem('li' + id)
      this.$refs.imgshow.src = base64
      this.showF = true
    },
    closeimg(id) {
      //图片的关闭
      this.showF = false
    },
    renameItem() {
      //重命名操作
      this.visible = false
      this.creatediv()
    },
    deleteItem() {
      //
      this.visible = false
      this.confirmpop()
    },
    showmenu(event, index, name) {
      //菜单栏的显示与定位
      console.log(event.clientX)
      console.log(event.clientY)
      this.visible = true
      this.$refs.menu.style.left = event.clientX + 'px'
      this.$refs.menu.style.top = event.clientY + 'px'
      this.currentIndex = index
      this.currentName = name
    },
    clearInput() {
      this.inputsearch = ''
      this.dosearch()
    },
    closeMenu() {
      //菜单栏的关闭
      this.visible = false
    },
    dosearch() {
      //搜索功能的实现
      this.visible = false
      console.log(111)
      this.$store.commit('search', this.inputsearch.trim())
    },
    detail(index) {
      //跳转到详情页面 携带index参数 表示id
      this.visible = false
      this.$router.push({
        name: 'detail',
        params: { index: index },
      })
      this.fullscreenLoading = true
      setTimeout(() => {
        this.fullscreenLoading = false
      }, 1000)
    },
    createnew() {
      //跳转到新增的页面
      this.visible = false
      this.$router.push({
        name: 'detail',
        params: { index: 'create' },
      })
      this.fullscreenLoading = true
      setTimeout(() => {
        this.fullscreenLoading = false
      }, 1000)
    },
  },

  filters: {
    //从后端读取数据需要过滤器才能格式化显示
    checkFormater(value) {
      const obj = {
        check1: '需选课密码',
        check2: '无限制，任何人可加入',
        check3: '本校学生可选',
        check4: 'XXXXX',
      }
      var arrout = []
      value.forEach((value, index, arr) => {
        arrout.push(obj[value])
      })
      return arrout
    },
    radioFormater(value) {
      const arrlist = ['Mooc', 'SPOC', '通识', '公开课']
      return arrlist[value]
    },
    unitFormater(value) {
      const obj = {
        0: '教育信息技术学院',
        1: '教师教育学院',
        2: '教育与人类发展学院',
        3: '计算机学院',
        4: '大数据学院',
        5: '其他',
      }
      return obj[value]
    },
    categoryFormater(value) {
      const obj = {
        0: '教育学',
        1: '教育技术学',
        2: '心理学',
        3: '比较教育学',
        4: '成人教育学',
        5: '小学教育',
      }
      return obj[value]
    },
  },
}
</script>
<style scoped>
.container {
}
.header {
  line-height: 32px;
  background-color: #fff;
}
#img1 {
  float: left;
}
* >>> .el-input__inner {
  float: left;
  margin-top: -63px;
  margin-left: 50px;
  width: 230px;
  height: 32px;
}
#img2 {
  float: right;
  margin-top: -83px;
}
#img3 {
  vertical-align: middle;
}
#img4 {
  vertical-align: middle;
}
#img5 {
  position: absolute;
}
#untitled {
  text-align: left;
  margin-top: -20px;
}
li {
  position: relative;
  list-style: none;
  height: 80px;
  display: block;
  width: 100%;
  margin-top: 5px;
}
li:hover {
  background-color: darkgray;
}
#divlist {
  text-align: left;
}
#divtext {
  position: absolute;
  left: 50px;
  width: 250px;
}
ul {
  margin-block-start: 20px;
  margin-block-end: 0px;
  padding-inline-start: 10px;
  height: 550px;
  /* background-color: green; */
  overflow: auto;
  text-indent: 0;
}
h4 {
  margin-block-start: 0em;
  margin-block-end: 0em;
}
p.info {
  margin-block-end: 4px;
  margin-block-start: 4px;
  display: block;
  color: gray;
  font-size: 10px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  word-break: break-all;
  overflow: hidden;
  word-wrap: break-word;
}
#pop {
  position: fixed;
  width: 100px;
  border-radius: 5px;
  background-color: rgba(142, 189, 240, 0.9);
  border: rgb(13, 78, 146);
  z-index: 9999;
  padding: 2px;
}
#pop > div {
  height: 24px;
}
#pop > div:hover {
  background-color: rgba(245, 239, 89, 0.3);
}
#maskimg {
  position: absolute;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.9);
}
#child {
  position: fixed;
  margin-left: 100px;
  margin-top: -20px;
  width: 100px;
  border-radius: 5px;
  background-color: rgba(142, 189, 240, 0.9);
  border: rgb(13, 78, 146);
  z-index: 99;
  padding: 2px;
}
#child > div:hover {
  background-color: rgba(245, 239, 89, 0.3);
}
</style>